<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>06_数据劫持-数据绑定</title>
		<!--
    1. 数据绑定
      * 初始化显示: 页面(表达式/指令)能从data读取数据显示 (编译/解析)
      * 更新显示: 更新data中的属性数据==>页面更新
  -->
		<!-- 
    观看源码需要总结的东西:
      1.data中的数据到底是如何显示在页面上的
      2.如何做到响应式的效果
   -->
	</head>
	<body>
		<div id="app" class="A">
			<p v-on:click="handleClick">{{msg}}</p>
			<p>{{msg}}</p>
			<p>{{msg}}</p>
		</div>
		<script src="./js/observer.js"></script>
		<script src="./js/watcher.js"></script>
		<script src="./js/compile.js"></script>
		<script src="./js/mvvm.js"></script>
		<script>
			var vm = new MVVM({
				el: "#app",
				data: {
					msg: "hello mvvm",
					person: {
						name: "xiaoming",
						msg: "123",
					},
				},
			});

			vm.msg = "hello world";
		</script>
	</body>
</html>
